<template>
  <div>
    <!--任务列表-->
    <div class="Task-list">
      <row type="flex" justify="space-around" class="code-row-bg">
        <i-col span="24">
          <div class="dashboard-container">
            <div class="container">
              <div
                  class="tableBar"
                  style="display: inline-block"
              >
                <el-button
                    type="primary"
                    class="continue"
                    @click="addClass()"
                >
                  创建演练任务
                </el-button>
              </div>
              <el-dialog
                  :title="taskData.title"
                  v-model="taskData.dialogVisible"
                  width="30%"
                  :before-close="handleClose"
                  align-center
              >
                <el-form
                    class="demo-form-inline"
                    label-width="100px"
                >
                  <el-form-item label="任务名称：">
                    <el-input v-model="taskData.taskName" placeholder="请输入组织机构名字"/>
                  </el-form-item>
                  <el-form-item label="任务描述：">
                    <el-input v-model="taskData.taskDesc" placeholder="请输入所属父类机构" />
                  </el-form-item>
                  <el-form-item label="组织机构：">
                    <el-input v-model="taskData.relatedOrg" placeholder="请输入所属父类机构" />
                  </el-form-item>
                  <el-form-item label="开始时间：">
                    <el-input v-model="taskData.startTime" placeholder="请输入所属父类机构" />
                  </el-form-item>
                  <el-form-item label="结束时间：">
                    <el-input v-model="taskData.endTime" placeholder="请输入所属父类机构" />
                  </el-form-item>
                </el-form>

                <span
                    slot="footer"
                    class="dialog-footer"
                >

              <el-button
                  type="primary"
                  size="default"
                  @click="submitForm()"
              >确 定</el-button>
                <el-button
                    type="primary"
                    size="default"
                    @click="taskData.dialogVisible = false"
                >取 消</el-button>
          </span>
              </el-dialog>
            </div>
            <task-list :list="list" :title="listTitle">
            </task-list>
            <div class="demo-pagination-block">
              <el-pagination
                  v-model:current-page="current"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  :page-count="pageNum"
                  prev-text="上一页"
                  next-text="下一页"
                  layout="total, prev, pager, next"
                  :total="counts"
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </i-col>
      </row>
    </div>

  </div>
</template>
<style scoped>
.container {
  display: flex;
  justify-content:center;
}
.tableBar {
  width: 1024px;
  display: flex ! important;
  justify-content: space-between;
  padding: 10px 0;
}
.container .tableBar > *{
  margin: 0 20px;
}
.Task-list {
  position: relative;
  text-align: center;
}
.el-pagination {
  padding: 10px;
  justify-content: center;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
<script>
import {Row} from "view-ui-plus";
import {Search} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
import input from "view-ui-plus/src/components/input/index.js";
import TaskList from "@/components/TaskList.vue";

export default {
  name: 'Tasks',
  computed: {
    input() {
      return input
    },
    Search() {
      return Search
    }
  },
  components: {
    Row,
    TaskList
  },
  data() {
    return {
      pageNum:1,
      counts: 0,
      current:1,
      list: [],
      listTitle: '所有任务',
      small: false,
      background: false,
      disabled: false,
      taskData: {
        'title': '创建演练任务',
        'dialogVisible': false,
        'taskName':'',
        'taskDesc':'',
        'relatedOrg':'',
        'startTime':'',
        'endTime':''
      },
    }
  },
  created: function () {
    this.$api.get('attackTask/getTasks/' + this.current).then((res) => {
      if (String(res.code) === '1') {
        this.list = res.data.records
        this.pageNum = res.data.pages
        this.current = res.data.current
        this.counts = res.data.total

      } else {
        this.$message.error(res.msg || '操作失败')
      }
    }).catch(err => {
      this.$message.error('请求出错了：' + err)
    })

  },
  methods: {
    handleCurrentChange(val) {
      this.$api.get('attackTask/getTasks/' + val).then((res) => {
        if (String(res.code) === '1') {
          this.list = res.data.records
          this.pageNum = res.data.pages
          this.current = res.data.current
          this.counts = res.data.total

        } else {
          this.$message.error(res.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })
    },

    addClass() {
      this.taskData.title = '创建演练任务'
      this.action = 'add'
      this.taskData.taskName = ''
      this.taskData.taskDesc = ''
      this.taskData.relatedOrg = ''
      this.taskData.startTime = ''
      this.taskData.endTime = ''
      this.taskData.dialogVisible = true
    },
    //数据提交
    submitForm() {
      let data = {
        taskName: this.taskData.taskName,
        taskDesc: this.taskData.taskDesc,
        relatedOrg: this.taskData.relatedOrg,
        startTime: this.taskData.startTime,
        endTime: this.taskData.endTime,
      }
      console.log('----------------------------')
      console.log(data)
      this.$api.post('attackTask/add', data).then((res) => {
        console.log(res.data)
        this.$Notice.info({
          title: '提示',
          desc: res.msg
        });
        this.taskData.dialogVisible = false
      })
    },
    handleClose(done) {
      ElMessageBox.confirm('是否确认关闭?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }
  }
}
</script>